import React, { useContext } from 'react';
import { IUserAddOrEditPos } from '../type';
import { Button, Card, Col, Row } from 'antd';
import { UserManageContext, UserOtherHandleContext } from '../hooks';
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import { UserAddOrEditPosLeft } from './UserAddOrEditPosLeft';
import { UserAddOrEditPosRight } from './UserAddOrEditPosRight';
import { loopArray } from '@/utils';

export const UserAddOrEditPos: React.FC<IUserAddOrEditPos> = () => {
  const { userFixCls, leftTreeData } = useContext(UserManageContext);
  const { userOthDispatch, twoLeftSelectRows } = useContext(
    UserOtherHandleContext,
  );

  // 左侧可以选择的数据数字
  const leftOkCheckLength = () => {
    let nodeList = loopArray(leftTreeData);
    let onCheckList = nodeList?.filter((item: any) => {
      return item?.textType == 2 && item?.open == true;
    });
    return onCheckList?.length;
  };

  // 全选和反选
  const selectReverseAll = (onType: string) => {
    if (onType == 'AllKey') {
      let checkIDs: any[] = [];
      let checkRows: any[] = [];
      let loop = (dataList: any[]) => {
        dataList?.forEach((item: any) => {
          if (item?.children && item?.children?.length > 0) {
            loop(item?.children);
          }
          if (item?.textType == 2 && item?.open == true) {
            checkIDs?.push(item?.id);
            checkRows?.push({ ...item });
          }
        });
      };
      loop(leftTreeData);
      userOthDispatch({
        type: 'otherHandle-twoLeftSelectKeys',
        payload: checkIDs,
      });
      userOthDispatch({
        type: 'otherHandle-twoLeftSelectRows',
        payload: checkRows,
      });
    }
    if (onType == 'delAllKey') {
      userOthDispatch({
        type: 'otherHandle-twoLeftSelectKeys',
        payload: [],
      });
      userOthDispatch({
        type: 'otherHandle-twoLeftSelectRows',
        payload: [],
      });
    }
  };

  //判断可选数据 和已选数据大小
  const handleIsCheck = () => {
    let chekcTrue: number = twoLeftSelectRows?.length;
    let checkFalse: number = leftOkCheckLength();
    if (chekcTrue >= checkFalse) {
      return true;
    } else if (chekcTrue <= checkFalse) {
      return false;
    }
  };

  return (
    <>
      <div>
        <Card
          bordered={false}
          style={{ width: '100%' }}
          bodyStyle={{ paddingBottom: 0, paddingTop: 5 }}
        >
          <Row className={userFixCls + 'userSecopeCard'}>
            <UserAddOrEditPosLeft />

            <Col span={2}>
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: document.body.clientHeight * 0.4,
                }}
              >
                <Button
                  style={{ marginBottom: 10 }}
                  type={
                    // twoLeftSelectRows?.length <= leftOkCheckLength() ? 'dashed' : 'primary'
                    handleIsCheck() ? 'dashed' : 'primary'
                  }
                  onClick={() => {
                    selectReverseAll('AllKey');
                  }}
                >
                  <DoubleRightOutlined />
                </Button>
                <Button
                  type={
                    // twoLeftSelectRows?.length >= leftOkCheckLength() ? 'primary' : 'dashed'
                    handleIsCheck() ? 'primary' : 'dashed'
                  }
                  onClick={() => {
                    selectReverseAll('delAllKey');
                  }}
                >
                  <DoubleLeftOutlined />
                </Button>
              </div>
            </Col>

            <UserAddOrEditPosRight />
          </Row>
        </Card>
      </div>
    </>
  );
};
